<template>
  <el-dropdown
    trigger="click"
    @command="handleCommand"
  >
    <span class="notice-wrapper">
      <i class="icon-yuyan iconfont" />
    </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item
        v-for="item of languageOption"
        :key="item.value"
        :disabled="language === item.value || item.disabled"
        :command="item.value"
      >
        {{ item.label }}
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
import {setStorage} from '../../utils';
import Vue from 'vue';
import {DropdownItem} from "element-ui";
Vue.use(DropdownItem);
/**
 * 语言切换栏
 * @author maolin
 */
export default {
  name: 'LanguageBar',
  data () {
    return {
      show: false,
      languageOption: [
        { label: this.$t('navbar.language.zh'), value: 'zh' },
        { label: this.$t('navbar.language.en'), value: 'en', disabled: true}
      ]
    };
  },
  computed: {
    language () {
      return this.$store.getters.language;
    }
  },
  created () {
  },
  methods: {
    /**
     * 切换语言,页面刷新
     * @public
     */
    handleCommand (command) {
      setStorage('language', command);
      this.$i18n.locale = command;
      this.$store.dispatch('app/setLanguage', command);
      window.location.reload();
    }
  }
};
</script>

<style scoped lang="scss">
</style>
